<template>
	<view>
		<view class="padding text-red ">
			请根据您的需要,
			自定义配置产品参数，系统自动为您
			核算产品价格!
		</view>
		<view class="rowsb align-center padding bg-white margin-bottom-xs"
			@click="productTypeMen(0,productTypeList[0])">
			<view>{{ productTypeList[0].name}}</view>
			<view>
				<text>{{productTypeList2[0].name ||'请选择'}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="rowsb align-center padding bg-white margin-bottom-xs">
			<view style="width: 150rpx;">{{productTypeList[1].name}}</view>
			<view class="flex flex-wrap">
				<view class="align-center margin-tb-sm " v-for="(item,index) in productType1" :key='index'
					@click="selectProduct(1,item,index)">
					<image :src="isVoltage==index?'/static/icon/isSelect.png':'/static/icon/isSelect2.png'" mode=""
						style="width: 40rpx;height: 40rpx;"></image>
					<view class="margin-left-sm">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="padding text-sm text-red bg-white solid-bottom">
			注：主轴数量 + 锯片数量 必须等于 Z轴数量
		</view>
		<!-- Z轴 -->
		<view class="rowsb align-center padding bg-white margin-bottom-xs "
			@click="productTypeMen(2,productTypeList[2])">
			<view>{{productTypeList[2].name}}</view>
			<view><text>{{productTypeList2[2].name ||'请选择'}}</text><text class="cuIcon-right"></text></view>
		</view>
		<!-- 主轴数量 -->
		<view v-if="isProduct3">
			<view class="rowsb align-center padding bg-white margin-bottom-xs"
				@click="productTypeMen2(3,productTypeList[3]) ">
				<view>{{productTypeList[3].name}}</view>
				<view>
					<text>选择主轴 </text>
					<text
						v-if="productTypeList2[3] && productTypeList2[3].num>0">{{productTypeList2[3].name ||'请选择'}}</text>
					<text v-if="productTypeList2[3].num ">数量:{{productTypeList2[3].num ||0}}</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<!-- 锯片数量 -->
		<view v-if="isProduct4">
			<view class="bg-white padding margin-bottom-xs">
				<view class="rowsb align-center  " @click="productTypeMen4(productTypeList[4])">
					<view>{{productTypeList[4].name}}</view>
					<view class=" align-center">
						<!-- <image src="/static/icon/jian.png" mode="" class="jupian_icon" @click="jNumRed()"></image> -->
						<text class="margin-lr-sm" v-if="jNum >0">{{jNum || 0}}</text>
						<text class="cuIcon-right"></text>
						<!-- <image src="/static/icon/jia.png" mode="" class="jupian_icon" @click="jNumAdd(productType4)"> -->
						</image>
					</view>
				</view>
				<view class="padding-bottom margin-bottom-xs" v-if="jNum !=0">
					<view class="flex bg-white padding-tb" v-for="(item,index) in productType4" :key='index'
						v-if="index <2">
						<text>{{item.name}}</text>
						<view class="margin-left">
							<view v-for="(item01,index01) in item.subordinate" :key='index'
								class="align-center margin-bottom-xs" @click="sawWebMen(item,index01,index)">
								<image :src="item01.num==index01?'/static/icon/xz.png':'/static/icon/wxz.png'"
									class="is_select">
								</image>
								<text class="margin-left-xs">{{item01.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- @click="electricDriveMen()"> -->
		<view class="rowsb align-center padding bg-white margin-bottom-xs"
			@click="productTypeMen(5,productTypeList[5])">
			<view>{{productTypeList[5].name}}</view>
			<view><text>{{productTypeList2[5].name ||'请选择'}}</text><text class="cuIcon-right"></text></view>
		</view>
		<!-- @click="transmissionMen()"> -->
		<view class="rowsb align-center padding bg-white margin-bottom-xs"
			@click="productTypeMen(6,productTypeList[6])">
			<view>{{productTypeList[6].name}}</view>
			<view><text>{{productTypeList2[6].name ||'请选择'}}</text><text class="cuIcon-right"></text></view>
		</view>
		<view class="rowsb align-center padding bg-white margin-bottom-xs">
			<view>{{productTypeList[7].name}}</view>
			<view class="align-center" v-for="(item,index) in productType7" :key='index'
				@click="selectProduct(7,item,index)">
				<image :src="isVoltage7==index?'/static/icon/isSelect.png':'/static/icon/isSelect2.png'" mode=""
					style="width: 40rpx;height: 40rpx;"></image>
				<view class="margin-left-sm">{{item.name}}</view>
			</view>
		</view>

		<!-- @click="spinAxleMen()" -->
		<view class="rowsb align-center padding bg-white margin-bottom-xs"
			@click="productTypeMen(8,productTypeList[8])">
			<view>{{productTypeList[8].name}}</view>
			<view><text>{{productTypeList2[8].name ||'请选择'}}</text><text class="cuIcon-right"></text></view>
		</view>
		<view class="rowsb align-center padding bg-white margin-bottom-xs"
			@click="productTypeMen(9,productTypeList[9])">
			<view>{{productTypeList[9].name}}</view>
			<view><text>{{productTypeList2[9].name ||'请选择'}}</text><text class="cuIcon-right"></text></view>
		</view>
		<view style="position: fixed;bottom: 0;width: 100%;z-index: 9;" @click="productOrder">
			<view class="bg-white align-center padding">
				<view>购买数量</view>
				<view class="margin-left align-center">
					<image src="/static/icon/jian.png" mode="" class="jupian_icon" @click.stop="jianNum"></image>
					<text class="margin-lr-sm">{{num}}</text>
					<image src="/static/icon/jia.png" mode="" class="jupian_icon" @click.stop="jiaNum"></image>
				</view>
			</view>


			<view class="cu-bar bg-white tabbar border shop">
				<view class="padding-left" style="width: 400rpx;">
					<!-- <text></text> -->
					<text class="text-red text-xl">￥{{parseInt(price)}}</text>
				</view>
				<view class="bg-red submit">提交订单</view>
			</view>
		</view>
		<view class="rowsb align-center padding bg-white margin-bottom-xs">
			<view>{{productTypeList[10].name}}</view>
			<view class="align-center" v-for="(item,index) in productType10" :key='index'
				@click="selectProduct(10,item,index)">
				<image :src="isVoltage10==index?'/static/icon/isSelect.png':'/static/icon/isSelect2.png'" mode=""
					style="width: 40rpx;height: 40rpx;"></image>
				<view class="margin-left-sm">{{item.name}}</view>
			</view>
		</view>
		<!-- @click="elseAxleMen" -->
		<view class="rowsb align-center padding bg-white margin-bottom-xs" v-for="(item,index) in productelseList"
			:key='index' @click="productTypeMen(index+11,item)">
			<view>{{item.name}}</view>
			<view><text>{{productTypeList2[index+11].name ||'请选择'}}</text><text class="cuIcon-right"></text></view>
		</view>
	</view>
</template>

<script>
	import {
		getProductType,
		getPrice
	} from '@/common/path.js'
	export default {
		data() {
			return {
				// 列表
				productTypeList: [], //普通
				productelseList: [], //其他
				productTypeList2: [], //选择的数据
				//电压列表
				productType1: [],
				isVoltage: 9999,
				//活动台面
				productType7: [],
				isVoltage7: 9999,
				//据片数量
				jNum: 0,
				jNumList: [],
				//控制柜
				productType10: [],
				isVoltage10: 9999,
				//总价格
				total: 0.00,
				//锯片
				productType4: [],
				num: 1, //商品数量
				// isType4: true, //用来判断是否选择了单头
				price: 0, //总价格
			}
		},
		onLoad() {
			//分类
			this.getProductType()

		},
		onShow() {
			let _this = this
			if (uni.getStorageSync('productTypeList')) {
				let productTypeList2 = uni.getStorageSync('productTypeList')
				let list = uni.getStorageSync(`productTypeList`)
				let arrayList = list ? list : []
				uni.setStorageSync(`productTypeList`, arrayList)
				this.productTypeList2 = uni.getStorageSync('productTypeList')
				console.log('[1]');
				if (productTypeList2[2] && productTypeList2[3] && productTypeList2[4]) {
					if (productTypeList2[2].num <= productTypeList2[3].num) {
						productTypeList2[4].num = 0
						arrayList[4] = productTypeList2[4]
						uni.setStorageSync(`productTypeList`, arrayList)
					}
				}
				console.log('[2]');
				if (productTypeList2[2] && productTypeList2[4] && productTypeList2[3]) {
					if (productTypeList2[2].num <= productTypeList2[4].num) {
						productTypeList2[3].num = 0
						arrayList[3] = productTypeList2[3]
						uni.setStorageSync(`productTypeList`, arrayList)
					}
				}
				console.log('[3]');
				if (productTypeList2[4]) {
					this.jNum = productTypeList2[4].num //锯片数量
					if(productTypeList2[4].num ==0){
						uni.removeStorage({  key: 'arrayList_id01'});
						uni.removeStorage({  key: 'arrayList_id02'});
					}
				}else{
				}
				if (productTypeList2[1] != null) {
					this.isVoltage = productTypeList2[1].index
				}
				if (productTypeList2[7] != null) {
					this.isVoltage7 = productTypeList2[7].index
				}
				if (productTypeList2[10] != null) {
					this.isVoltage10 = productTypeList2[10].index
				}
				console.log('[4]');
				//计算总价格
				this.getPrice()
			}
		},
		watch: {

		},
		computed: {
			// 主轴判断是否显示
			isProduct3() {
				if (this.productTypeList2[2] && this.productTypeList2[4]) {
					let data = true
					let num4 = this.productTypeList2[4].num
					let num2 = this.productTypeList2[2].num
					if (num4 >= num2) { //锯片数量 > = Z轴数量的时候
						data = false
						console.log('[主轴不显示 条件成立]');
					} else {
						data = true
					}
					return data
				} else {
					return true
				}
			},
			//锯片判断是否显示
			isProduct4() {
				if (this.productTypeList2[2] && this.productTypeList2[3]) {
					let data = true
					let num2 = this.productTypeList2[2].num
					let num3 = this.productTypeList2[3].num
					if (num3 >= num2) { //锯片数量 > = Z轴数量的时候
						data = false
						console.log('[锯片不显示 条件成立]');
					} else {
						data = true
					}
					return data
				} else {
					return true
				}
			}

		},
		methods: {
			//价格
			getPrice() {
				let _self, data
				_self = this
				let _t = this.$tools
				let ids = []
				let num = 0
				let idstring = []
				let id01 = uni.getStorageSync('arrayList_id01')
				let id02 = uni.getStorageSync('arrayList_id02')
				let productTypeArray = uni.getStorageSync('productTypeList')
				productTypeArray.forEach(item => {
					if (item == null) {
						let obj = {
							id: 0
						}
						item = obj
					}
					ids.push(item.id ? item.id : 0)
				})
				// console.log('[5]');
				if (uni.getStorageSync('productTypeList')[4] == null) { //如果没有选择锯片数量
					num = 0
					//带 其他类型的 
					// idstring = [...ids.slice(0, 5), 0, 0, ...ids.slice(5, ids.length)]
					idstring = [...ids.slice(0, 5), 0, 0, ...ids.slice(5, 11)]
				} else {
					num = uni.getStorageSync('productTypeList')[4].num
					//带 其他类型的
					// idstring = [...ids.slice(0, 5), id01, id02, ...ids.slice(5, ids.length)]
					
					
					idstring = [...ids.slice(0, 5), id01, id02, ...ids.slice(5, 11)]
				}
				// console.log('[6]');

				console.log('[7]',idstring.toString());
				// console.log('[9]',this.num);

				data = {
					string: idstring.toString(),
					main_number: productTypeArray[3] ? productTypeArray[3].num : 0, //主轴数量
					number: this.num, //产品数量
					blades_number: uni.getStorageSync('productTypeList')[4] ? uni.getStorageSync(
						'productTypeList')[4].num : 0
				}
				// console.log('[穿的参数]', data);
				this.$axios.axios('POST', getPrice, data)
					.then((res) => {
						console.log('[价格]', res);
						if (res.code == 1) {
							this.price = res.data.price
							this.$tools.showToast(res.data.price)
						} else {
							_t.showToast(res.msg)
						}
					})
			},

			// 减商品数量
			jianNum() {
				if (this.num <= 1) {
					this.$tools.showToast('最少不能少于1')
				} else {
					this.num--
				}
			},
			//增加购买数量
			jiaNum() {
				this.num++
			},
			//选择
			selectProduct(event, item, index) {
				console.log(event, item, index);
				let _this = this
				if (event == 1) {
					_this.isVoltage = index
				} else if (event == 7) {
					_this.isVoltage7 = index
				} else if (event == 10) {
					_this.isVoltage10 = index
				}

				let list = uni.getStorageSync(`productTypeList`)
				let arrayList = list ? list : []
				item.index = index
				arrayList[event] = item
				// console.log('[存储信息]', arrayList[event]);
				uni.setStorageSync(`productTypeList`, arrayList)
				_this.$tools.showToast2('选择完成')
				_this.getPrice()
			},
			//获取产品分类
			getProductType1(pid, index) {
				let data = {
					pid: pid
				}
				this.$axios.axios('POST', getProductType, data)
					.then((res) => {
						if (res.code == 1) {
							if (index == 1) {
								this.productType1 = res.data
								// console.log('[电压]', res);
							} else if (index == 4) {
								res.data.forEach((item, index) => {
									item.subordinate.forEach((item01, index01) => {
										item01.num = 0
										if (index == 0 && index01 == 0) {
											uni.setStorageSync('arrayList_id01', item01.id)
										} else if (index == 1 && index01 == 0) {
											uni.setStorageSync('arrayList_id02', item01.id)
										}
									})
								})
								this.productType4 = res.data
								let list = uni.getStorageSync(`productTypeList`)
								let arrayList = list ? list : []
							} else if (index == 7) {
								this.productType7 = res.data
								// console.log('[活动台面]', res);
							} else if (index == 10) {
								// console.log('[控制柜]', res);
								this.productType10 = res.data
							}
						}
					})
			},
			//分类
			getProductType() {
				let data = {
					pid: 0,
				}
				this.$axios.axios('POST', getProductType, data)
					.then((res) => {
						if (res.code == 1) {
							this.productTypeList = res.data
							let idList = [{
									id: res.data[1].id,
									index: 1
								},
								{
									id: res.data[4].id,
									index: 4
								},

								{
									id: res.data[7].id,
									index: 7
								},
								{
									id: res.data[10].id,
									index: 10
								},
							]
							idList.forEach(item => {
								this.getProductType1(item.id, item.index)
							})
							this.productelseList = res.data.splice(11)
						}
					})
			},
			//减少锯片数量
			jNumRed() {
				if (this.jNum > 0) {
					this.jNum--
					uni.removeStorage({
						key: 'arrayList_id01',
					});
					uni.removeStorage({
						key: 'arrayList_id02',
					});
				} else {
					this.$tools.showToast('最少不得少于0')
				}
			},
			//增加锯片数量
			jNumAdd(event) {
				this.jNum++

				uni.setStorageSync('arrayList_id01', event[0].subordinate[0].id)
				uni.setStorageSync('arrayList_id02', event[1].subordinate[0].id)
				let _this = this
				let _array = this.productType4


				//初始化参数
				if (this.jNum == 1) {

					event.forEach(item => {
						item.subordinate.forEach(item => {
							item.num = 0
						})
					})
				}
				let data = {
					num: this.jNum, //锯片数量
					pidData: _array
				}
				// console.log('[选择的]',data);
				let list = uni.getStorageSync(`productTypeList`)
				let arrayList = list ? list : []
				arrayList[4] = data
				uni.setStorageSync(`productTypeList`, arrayList)
				this.$forceUpdate()
			},
			//选择型号
			productTypeMen(index, item) {
				// console.log('[当前类型下标]：', index);
				// console.log('[当前类型信息]：', item);
				uni.navigateTo({
					url: `modules/productType?pid=${item.id}&index=${index}`
				})
			},
			// 选择z轴列表 按 电压获取列表
			productTypeMen2(index, item) {
				let array = uni.getStorageSync('productTypeList')
				let id = array[1].id //电压id
				uni.navigateTo({
					url: `modules/productType?pid=${item.id}&index=${index}&dyid=${id}`
				})
			},
			//选择锯片
			productTypeMen4(item) {
				let array = uni.getStorageSync('productTypeList')
				let id = array[1].id //电压id
				uni.navigateTo({
					url: `modules/productType?pid=${item.id}&index=${4}&dyid=${id}`
				})
			},
			//提交订单
			productOrder() {
				let _this = this
				let list = uni.getStorageSync(`productTypeList`)
				console.log('[list]', list);
				let listShows = [{
						name: '请选择型号'
					},
					{
						name: '请选择电压'
					},
					{
						name: '请选择Z轴数量'
					},
					{
						name: '请选择主轴'
					},
					{
						name: ''
					},
					{
						name: '请选择电机驱动'
					},
					{
						name: '请选择传动类型'
					},
					{
						name: '请选择活动台面'
					},
					{
						name: '请选择旋转轴'
					},
					{
						name: '请选择系统类型'
					},
					{
						name: '请选择控制柜'
					},
				]
				let shtost = this.$tools.showToast


				if (list == '') {
					this.$tools.showToast('信息填写不完整')
					return false
				}
				for (let i = 0; i <= 10; i++) {
					if (i != 4) {
						if (list[i] == undefined || list[i] == null) {
							shtost(listShows[i].name)
							return
						}
					}
				}
				/**
				  	1.主轴数量+锯片数量=Z轴数量（必须）
					2.主轴数量=Z轴数量时，锯片不可再选
					3.主轴数量为0时，锯片数量必须选择与Z轴一直
					4.如果需要单独一项，相当于独立配置，再单独下单；
				 */


				let zZhou = 0
				let array = [{
						name: '单头',
						num: 1
					},
					{
						name: '二头',
						num: 2
					},
					{
						name: '三头',
						num: 3
					},
					{
						name: '四头',
						num: 4
					},
					{
						name: '五头',
						num: 5
					},
					{
						name: '六头',
						num: 6
					},
				]
				array.forEach(item => {
					if (item.name == list[2].name) {
						if (item == null) {
							shtost('请选择Z轴数量')
						}
						zZhou = item.num //拿Z轴数量
					}
				})
				let productTypeList2 = this.productTypeList2
				if (productTypeList2[4] && productTypeList2[3] && productTypeList2[4]) {
					if (productTypeList2[2].num != (productTypeList2[3].num + productTypeList2[4].num)) {
						_this.$tools.showToast('主轴数量+锯片数量必须=Z轴数量')
					}else{
						uni.navigateTo({
							url: `productOrder?num=${this.num}&jNum=${this.jNum}&total=${this.total*this.num}`
						})
					}
				}else {
					if(productTypeList2[3] ==null && productTypeList2[2].num != productTypeList2[4].num ){
						_this.$tools.showToast('主轴数量+锯片数量必须=Z轴数量')
					}else if(productTypeList2[4] ==null && productTypeList2[2].num != productTypeList2[3].num){
						_this.$tools.showToast('主轴数量+锯片数量必须=Z轴数量')
					}else{
						uni.navigateTo({
							url: `productOrder?num=${this.num}&jNum=${this.jNum}&total=${this.total*this.num}`
						})
					}
				}
				console.log('[主轴]', list[3].num, '[锯片]', _this.jNum, '[Z轴]', zZhou, );
				
			},
			/**
			 * @param {Object} item 父级信息
			 * @param {Object} index01  子级下标
			 */
			sawWebMen(item, index01, type) {
				let _this = this
				let list = uni.getStorageSync(`productTypeList`)
				let arrayList = list ? list : []
				let _array = item.subordinate
				_array.forEach(item => {
					item.num = index01
				})

				let data = {
					num: this.jNum, //锯片数量
					pidData: _array
				}
				if (type == 0) { //如果是 第一个
					uni.setStorageSync('arrayList_id01', _array[index01].id)
				} else {
					uni.setStorageSync('arrayList_id02', _array[index01].id)

				}
				return
				// console.log('[选择的]',data);
				arrayList[4] = data
				uni.setStorageSync(`productTypeList`, arrayList)
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 120rpx;
	}

	.jupian_icon {
		height: 50rpx;
		width: 50rpx;
	}

	.is_select {
		width: 40rpx;
		height: 40rpx;
	}
</style>
